<template>
    <Tree :data="data" :render="renderContent"></Tree>
</template>
<script>
import util from '../libs/util';
    export default {

        created() {
            this.data =  [{
                title: '商品类别',
                expand: true,
                render: (h, { root, node, data }) => {
                    return h('span', {
                        style: {
                            display: 'inline-block',
                            width: '100%',
                        }
                    }, [
                        h('span', [
                            h('Icon', {
                                props: {
                                    type: 'ios-folder-outline'
                                },
                                style: {
                                    marginRight: '8px'
                                }
                            }),
                            h('span', data.title)
                        ]),
                        h('span', {
                            style: {
                                display: 'inline-block',
                                float: 'right',
                                marginRight: '32px'
                            }
                        }, 
                        )
                    ]);
                },
                children: [
                    {
                        title: '享堂集市',
                        expand: false,
                        type: 0,
                        children: []
                    },
                    {
                        title: '享堂书院',
                        type: 2,
                        expand: false,
                        children: []
                    },
                    {
                        title: '享堂学院',
                        type: 1,
                        expand: false,
                        children: []
                    }
                ]
            }];
            this.load_data();
        },

        data () {
            return {
                data: [],
                buttonProps: {
                    type: 'ghost',
                    size: 'small',
                },
                value : ''
            }
        },
        methods: {
            load_data() {
               // 获取服务器数据
               this.$http.get(util.baseURL+"categorys/getCategorys",)
                    .then(
                        (response)=>{
                            if(response.data.data) {
                              this.process_data(response.data.data);
                            } else {
                               this.$Message.error("暂无属性列表！");
                               return;
                            }
                        },
                        (error)=>{
                            console.log(error);
                        }
                );
               
            },
            process_data(server_data) {
                var children =  this.data[0].children;
                var secondChildren = [];
                var recoder, type;
               // 0：集市商品类别，1：学院商品类别，2：书院商品类别
                for( var i=0; i<children.length; i++) {
                    secondChildren = children[i].children || [];
                    type = children[i].type;
                 
                    for (var j=0; j<server_data.length; j++) {
                        recoder = server_data[j];
                        if (type == recoder.type) {
                            secondChildren.push({
                                title: recoder.value,
                                id: recoder.id,
                                type: recoder.type,
                                expand: false,
                            });
                        }
                    }
                }

                //console.log(this.data[0].children);
                
            },

            renderContent (h, { root, node, data }) {
                var self = this;
                return h('span', {
                    style: {
                        display: 'inline-block',
                        width: '100%'
                    }
                }, [
                    h('span', [
                        h('Icon', {
                            props: {
                                type: 'ios-paper-outline'
                            },
                            style: {
                                marginRight: '8px'
                            }
                        }),
                        h('span',[
                                h('input', {
                                    domProps: {
                                        value:  data.title,
                                    },
                                    on : {
                                        'change' : function(e) {
                                            if (!data.expand) {
                                               data.title = e.target.value
                                               self.updateCategory(data);
                                            }
                                           // self.value = e.target.value
                                           // if (self.value) {
                                            //    params.row.bean = self.value;
                                            //    self.updateBean(params.index, self.value);
                                           // }
                                        }
                                    }
                                })
                            ])
                       // h('span', data.title)  
                        
                    ]),
                    h('span', {
                        style: {
                            display: 'inline-block',
                            float: 'right',
                            marginRight: '32px'
                        }
                    }, [
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-plus-empty'
                            }),
                            style: {
                                marginRight: '8px'
                            },
                            on: {
                                click: () => { this.append(node, data) }
                            }
                        }),
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-minus-empty'
                            }),
                            on: {
                                click: () => { this.remove(root, node, data) }
                            }
                        })
                    ])
                ]);
            },
            append (node, data) {
                if (node.parent != 0) {
                    this.$Message.error("此节点不可添加");
                    return;
                }
                this.$Modal.confirm({
                    onOk: () => {
                        this.appendNode(data);
                    },
                    render: (h) => {
                        return h('Input', {
                            props: {
                                value: this.value,
                                autofocus: true,
                                placeholder: '输入类别名称'
                            },
                            on: {
                                input: (val) => {
                                    this.value = val;
                                }
                            }
                        })
                    }
                })
                
            },
            appendNode(data) {
//服务器添加数据
                var body = {
                    value : this.value,
                    t : data.type 
                };
                this.$http.post(util.baseURL+"categorys/addCategorys",body,
                    {emulateJSON: true})
                    .then(
                        (response)=>{
                            if(response.data.data) {
                                this.$Message.info("添加成功！");
                            } else {
                                this.$Message.error("添加失败！");
                                return;
                            }
                        },
                        (error)=>{
                            console.log(error);
                        }
                );
                const children = data.children || [];
                children.push({
                    title: this.value,
                    expand: false,
                    type: data.type,
                });
                this.value = '';
                this.$set(data, 'children', children);
            },
            remove (root, node, data) {
                if (node.parent == 0) {
                    this.$Message.error("此节点不可删除");
                    return;
                }
// 服务器删除数据
                var body = {
                    t : data.type,
                    value : data.title
                };
                this.$http.post(util.baseURL+"categorys/delCategorys",body,
                    {emulateJSON: true})
                    .then(
                        (response)=>{
                            if(response.data.data) {
                                this.$Message.info("删除成功！");
                            } else {
                                this.$Message.error("删除失败！");
                                return;
                            }
                        },
                        (error)=>{
                            console.log(error);
                        }
                );
                const parentKey = root.find(el => el === node).parent;
                const parent = root.find(el => el.nodeKey === parentKey).node;
                const index = parent.children.indexOf(data);
                parent.children.splice(index, 1);
            },
            // 修改属性
            updateCategory(data) {
                this.$http.post(util.baseURL+"categorys/updateCategorys",
                   data,
                        {emulateJSON: true})
                        .then(
                            (response)=>{
                                this.$Message.info(response.data.msg);
                            },
                            (error)=>{
                                console.log(error);
                            }
                );
            }
        }
    }
</script>
